<template>
    <div>
        <div class="pangoo-transit" :class="type" v-show="show">
            <p class="pangoo-icon">
                <i></i>
            </p>
            <p class="pangoo-title" v-text="opt.title"></p>
            <p class="pangoo-remark" v-text="opt.info"></p>
            <p class="pangoo-btn">
                <a @click="confirm">确定</a>
            </p>
        </div>
    </div>
</template>
<script>
  import {go} from 'vux/src/libs/router.js'
  export default {
    name: 'pangoo-transit',
    data () {
      return {
        show: false,
        opt: {
          title: '',
          info: '',
          confirm: '',
          type: 'success'
        }
      }
    },
    computed: {
      type: function () {
        return 'pangoo-' + this.opt.type
      }
    },
    methods: {
      confirm: function () {
        if (typeof this.opt.confirm === 'string') {
          go(this.opt.url)
        } else if (typeof this.opt.confirm === 'function') {
          this.opt.confirm()
        }
      }
    }
  }
</script>

<style lang="less">
    .pangoo-transit{position:fixed;top:0;bottom:0;left:0;right:0;background:#fff;text-align:center;z-index: 99999}
    .pangoo-transit .pangoo-icon{text-align:center;padding-top:80px}
    .pangoo-transit .pangoo-icon i{display:inline-block;width:100px;height:100px;background-repeat:no-repeat;background-size:contain}
    .pangoo-transit .pangoo-title{font-size:16px;padding-top:10px;font-weight:bold}
    .pangoo-transit .pangoo-remark{color:#ccc;padding:15px 10px}
    .pangoo-transit .pangoo-btn{padding:20px 30px 0}
    .pangoo-transit .pangoo-btn a{display:inline-block;text-decoration:none;line-height:40px;color:#000;width:100%;height:40px;background:none;font-size:18px;font-weight:400;border-radius:3px;-webkit-appearance:none}
    .pangoo-warning .pangoo-icon i{background-image:url()}
    .pangoo-notice .pangoo-icon i{background-image:url()}
    .pangoo-success .pangoo-icon i{background-image:url()}
    .pangoo-success .pangoo-btn a{border:1px solid #78af2c}
    .pangoo-notice .pangoo-btn a{border:1px solid #82e6f3}
    .pangoo-warning .pangoo-btn a{border:1px solid #d81e06}
</style>
